<template>
  <div class="condition-card">
    <div class="card-title">{{ props.title }}</div>
    <div class="card-body">
      <div v-for="(item, index) in cdList"
           :key="index"
           @click="handleSelectNode(item)"
           :class="['card-body-item', activeBtn === item.tagName ? 'card-body-item-active' : '' ]">{{ item.tagName }}</div>
    </div>
  </div>
</template>

<script setup name="ConditionCard">
import {getTagList} from "@/api/source.js";

const props = defineProps({
  modelValue: String,
  title: String,
  type: String,
})

const emit = defineEmits(['update:modelValue', 'change'])

const activeBtn = ref('');

const cdList = ref([
  {
    tagName: '动作'
  }
]);

const initTagList = () => {
  getTagList(props.type).then(res => {
    if (res.code === 200) {
      cdList.value = res.data;
    }
  })
}

const handleSelectNode = (row) => {
  if (activeBtn.value === row.tagName) {
    activeBtn.value = '';
  } else {
    activeBtn.value = row.tagName;
  }
  emit('update:modelValue', activeBtn.value);
  emit('change', activeBtn.value);
}

watch(() => props.modelValue, () => {
  activeBtn.value = props.modelValue;
})


initTagList();
</script>

<style lang="scss" scoped>
.condition-card {
  padding: 20px 20px 0 20px;
  user-select: none;

  .card-title {
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }

  .card-body {
    padding: 10px;
    display: flex;
    flex-flow: wrap;

    &-item {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0 10px 10px 0;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
    }

    &-item-active {
      background-color: var(--tc-btn-active);
    }

  }
}
</style>

